<template>
<div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()"></van-nav-bar>
    <van-cell title="头像" is-link @click="$refs.file.click()">
        <template #default>
            <input type="file" hidden ref="file" @change="handleChange" />
            <van-image round width="0.7rem" height="0.7rem" :src="userInfo.photo" />
        </template>
    </van-cell>
    <van-cell title="昵称" is-link :value="userInfo.name" @click="isUpdateUsernameShow=true" />
    <van-cell title="性别" is-link :value="userInfo.gender === 0 ?'男':'女'" @click="isUpdateGenderShow=true" />
    <van-cell title="生日" is-link :value="userInfo.birthday" @click="isUpdateBirthdayShow=true" />
    <van-popup v-model="isUpdateUsernameShow" position="bottom" :style="{ height: '100%' }">
        <update-name v-if="isUpdateUsernameShow" @close="isUpdateUsernameShow=false" v-model="userInfo.name"></update-name>
    </van-popup>

    <van-popup v-model="isUpdateGenderShow" position="bottom">
        <update-gender v-if="isUpdateGenderShow" :gender="userInfo.gender" @close="isUpdateGenderShow=false" @change="userInfo.gender=$event"></update-gender>
    </van-popup>

    <van-popup v-model="isUpdateBirthdayShow" position="bottom">
        <update-birthday @close="isUpdateBirthdayShow=false" v-if="isUpdateBirthdayShow" v-model="userInfo.birthday"></update-birthday>
    </van-popup>

    <van-popup v-model="isUpdatePhotoShow" position="bottom" :style="{ height: '100%' }">
        <update-photo :img="img" @close="isUpdatePhotoShow=false" v-if="isUpdatePhotoShow" @update-photo="userInfo.photo=$event"></update-photo>
    </van-popup>
</div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo'
export default {
  name: 'UserProfile',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  created () {
    this.getUserInfo()
  },
  data () {
    return {
      userInfo: {},
      isUpdateUsernameShow: false,
      isUpdateGenderShow: false,
      isUpdateBirthdayShow: false,
      isUpdatePhotoShow: false,
      img: ''
    }
  },
  methods: {
    async getUserInfo () {
      try {
        const { data: res } = await getUserProfile()
        console.log(res)
        this.userInfo = res.data
      } catch (err) {
        this.$toast.fail('请求个人资料失败')
      }
    },
    handleChange (e) {
      // e.target.files[0] ---> Bolb的对象(File对象)
      // Blob 二进制对象
      // File 文件对象
      // console.log(e.target.files[0] instanceof Blob)
      // console.log(e.target.files[0] instanceof File)
      // console.log(window.URL.createObjectURL(e.target.files[0]))// 得到一个内存中的文件的引用地址
      this.img = window.URL.createObjectURL(e.target.files[0])
      e.target.value = ''// 重置一下文件控件的值
      this.isUpdatePhotoShow = true
    }
  }
}
</script>

<style scoped lang="less">

</style>
